<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="divone">
        <h1 id="one">1111</h1>
        <h2>222</h2>
    </div>
    <div>
        <h1 class="a">1111</h1>
        <h2 name="aa">222</h2>
    </div>

    <input type="text" name="aa">

    
    <script>
        //通过id获取元素,只能用document
       console.log(document.getElementById("one"));

       //根据标签名获取---集合,可以通过其他祖先元素
       console.log(document.getElementsByTagName("h1"));
       var divone=document.getElementById("divone");
       console.log(divone.getElementsByTagName("h1"));

       // 根据类名获取（不兼容ie6~8）集合,可以通过其他祖先元素
       console.log(document.getElementsByClassName("a"));

       //根据 name 属性(自己添加，标签本身自带)值获取--集合,只能用document
       //表单
       console.log(document.getElementsByName("aa"));

       //根据选择器获取----可以通过其他祖先元素
      //注意：querySelector 和querySelectorAll 在ie6-ie8 下不兼容
      // querySelector 获取第一个，单个元素
      // querySelectorAll 获取所有满足条件的内容，集合
      console.log(document.querySelector("div h1"));
      console.log(document.querySelectorAll("div h1"));

      console.log(document.head);//获取 head 元素
      console.log(document.body);//获取 body 元素
      console.log(document.documentElement);//获取 html 元素
    </script>
</body>
</html>